<template>
  <div class="page-container bg-primary px-22rpx px-16rpx pb-1 pb-260rpx" min-h-full>
    <div
      class="item flex justify-left card-modal center m-b-3 p-2"
      v-for="(item, index) in datas.list"
      :key="index"
    >
      <div
        :class="[datas.selections.includes(item.shoppingId) ? 'checkBox active' : 'checkBox']"
        w-50rpx
        h-50rpx
        b-rounded-50%
        b-2
        border="2rpx solid gray"
        @click="handleSelect(item)"
      >
      </div>
      <div class="content flex flex-nowrap m-l-2 w-100%" @click="detailProduct(item)">
        <u-image
          width="200rpx"
          height="200rpx"
          :src="handleSingleUnitImg(item)"
          mode="aspectFill"
        ></u-image>
        <div class="detail flex-col flex m-l-2 justify-between">
          <view>{{ item.title }}</view>
          <div class="sub color-gray font-size-26"> {{ item.sub_title }} </div>
          <div class="main color-primary font-size-32"> {{ item.price || '-' }} </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer position-fixed z-99 bottom-150rpx w-full">
    <div
      @tap="removeShopping"
      class="order-opt bg-purple light color-white font-900 h-80rpx b-rounded-40rpx text-center line-height-80rpx w-80% m-a w-300rpx h-120rpx bg-primary"
    >
      移除收藏</div
    >
  </div>
</template>

<script lang="ts" setup>
  import {
    queryShopping,
    sendSubscribeToB,
    deleteShopping,
  } from '@/services/api/shopping/shopping';
  import { SubscribeTempIdEnum } from '@/enums/subscribe';
  import { router } from '@/utils/router';
  import { handleSingleUnitImg } from '../pageFun/index';
  const datas = reactive({
    list: [],
    selections: [] as Array<number>,
  });

  onMounted(() => {
    getShopping();
  });

  const getShopping = () => {
    datas.selections = [];
    queryShopping()
      .then((result: any) => {
        datas.list = result.data;
      })
      .catch((err: any) => {
        console.log(err);
      });
  };

  const handleSelect = (row: any) => {
    const el = row && row.shoppingId;
    const sets: Set<number> = new Set(datas.selections);
    sets.has(el) ? sets.delete(el) : sets.add(el);
    datas.selections = Array.from(sets);
  };
  // 商品详情
  const detailProduct = (row: any) => {
    router.navigate('/pages/footer/news/productView', { id: row.id });
  };

  // 移除收藏
  const removeShopping = () => {
    deleteShopping({ ids: [...datas.selections] }).then((result) => {
      uni.showToast({ title: '操作成功' });
      getShopping();
    });
  };

  // 订阅通知
  const handleOrder = () => {
    uni.requestSubscribeMessage({
      tmplIds: [SubscribeTempIdEnum.customerOrder],
      success(resp) {
        console.log(resp);
        if (resp.errMsg == 'requestSubscribeMessage:ok') {
          const payload = {
            template_id: SubscribeTempIdEnum.businessNotice,
            openid: 'oS7684nn0YaDSHEBX4yMsekVVJ_M',
            data: {
              merchant_id: Number(getEnvValue('VITE_MERCHANT_ID')),
              users_id: getCache(USER_INFO_KEY).id,
            },
          };
          console.log('payload: ', payload);
          addOrder(payload).then((result) => {
            uni.showToast({
              title: '预约成功',
              icon: 'success',
              mask: true,
            });
          });
        }
      },
      fail(err) {
        console.log(err);
      },
    });
  };
</script>

<style lang="scss" scoped>
  .page-container {
    background: linear-gradient(180deg, var(--primary), transparent);
  }
  .item {
    .checkBox.active::after {
      content: '√';
    }
  }

  .footer {
  }
</style>
